<template>
  <div>
    <MainLayout :title="'测试记录'">
      <template #main>
        <div class="search_layout">
          <SearchLayout>
            <template #search>
              <div class="header_modal">
                <div class="header_modal_item">
                  <el-select
                    v-model="search_params.queryParams.recordStatus"
                    placeholder="请选择记录状态"
                    size="default"
                    clearable
                  >
                    <el-option
                      class="select_item"
                      v-for="item in test_state_list"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div class="header_modal_item">
                  <el-select
                    v-model="search_params.queryParams.recordResult"
                    placeholder="请选择记录结果"
                    size="default"
                    clearable
                  >
                    <el-option
                      class="select_item"
                      v-for="item in sase_result_list"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div class="header_modal_item">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="search_params.queryParams.recordTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                </div>
                <el-button type="primary" @click="handleSearchData('search')"
                  >搜索</el-button
                >
                <el-button @click="handleReset">重置</el-button>
              </div>
            </template>
            <template #table>
              <el-table
                :data="table_list"
                border
                style="width: 100%"
                height="calc(100vh - 260px)"
                v-loading="loading"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                  align="center"
                />
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  min-width="120"
                  align="center"
                >
                  <template #default="{ row }">
                    {{ iso8601ToTime(row.createTime) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="execType"
                  label="执行类型"
                  min-width="120"
                  align="center"
                >
                  <template #default="{ row }">
                    {{ handleExecuteTypeList(row.execType) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="recordTime"
                  label="发起时间"
                  min-width="120"
                  align="center"
                >
                  <template #default="{ row }">
                    {{ iso8601ToTime(row.recordTime) }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="envName"
                  label="执行环境"
                  min-width="120"
                  align="center"
                />

                <el-table-column
                  prop="concNum"
                  label="并发数"
                  width="80"
                  align="center"
                />
                <el-table-column
                  prop="recordStatus"
                  label="记录状态"
                  align="center"
                >
                  <template #default="{ row }">
                    {{ handleTestStateLabel(row.recordStatus) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="recordResult"
                  label="记录结果"
                  align="center"
                >
                  <template #default="{ row }">
                    {{ handleSaseResultLabel(row.recordResult) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operatorName"
                  label="操作人姓名"
                  min-width="120"
                  align="center"
                />
                <el-table-column label="操作" width="130" align="center">
                  <template #default="{ row }">
                    <div class="flex_block operate_block">
                      <div
                        class="color_primary cursor_pointer"
                        @click="handleDetails(row)"
                      >
                        查看
                      </div>
                      <div
                        class="color_success cursor_pointer"
                        @click="handleReport(row)"
                        v-if="
                          row.recordReportUrl && row.recordStatus !== 'RUNNING'
                        "
                      >
                        <!-- 有报告链接 而且是不能是运行中 -->
                        报告
                      </div>
                      <div
                        class="color_delete cursor_pointer"
                        @click="handleStop(row)"
                        v-if="row.recordStatus === 'RUNNING'"
                      >
                        <!-- 只有进行中才可以取消 -->
                        取消
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <Pagination
                :page="search_params.pageNum"
                :size="search_params.pageSize"
                :total="table_total"
                @change="handlePaginationChange"
              ></Pagination>
            </template>
          </SearchLayout>
        </div>
      </template>
    </MainLayout>
  </div>
</template>

<script setup>
import {
  sase_result_list,
  test_state_list,
  handleSaseResultLabel,
  handleTestStateLabel,
  handleExecuteTypeList,
  BaseImageUrl,
} from "@/api/common";
import { GetTestCaseRecord, StopTestCase } from "@/api/test_case";
import { iso8601ToTime } from "@/utils/index";
import { ElMessage } from "element-plus";

const router = useRouter();
const loading = ref(false);
const search_params = reactive({
  pageNum: 1,
  pageSize: 10,
  queryParams: {
    recordStatus: "",
    recordResult: "",
    recordTime: [],
  },
});
const table_list = ref([]);
const table_total = ref(0);
// 页面加载
onMounted(() => {
  handleSearchData();
});

// 重置
const handleReset = () => {
  search_params.queryParams.recordStatus = "";
  search_params.queryParams.recordResult = "";
  search_params.queryParams.recordTime = [];
  handleSearchData("search");
};
const handlePaginationChange = (value) => {
  search_params.pageNum = value.page;
  search_params.pageSize = value.size;
  handleSearchData();
};
// 获取列表数据
const handleSearchData = (type) => {
  loading.value = true;
  if (type === "search") {
    search_params.pageNum = 1;
  }
  GetTestCaseRecord(search_params)
    .then((res) => {
      table_list.value = res.list;
      table_total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleStop = (row) => {
  console.log(row);
  ElMessageBox.confirm("确定要取消执行该用例吗?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      loading.value = true;
      StopTestCase({ taskId: row.recordId }).then((res) => {
        handleSearchData();
        ElMessage.success(res.msg);
      });
    })
    .finally(() => {
      loading.value = false;
    })
    .catch(() => {});
};
const handleDetails = (row) => {
  router.push({ path: "/TestRecord/detail1", query: { id: row.recordId,envName:row.envName } });
};
// 跳转到 报告 页面
const handleReport = (row) => {
  // router.push({ path: "/Report/index", query: { id: row.recordId } });
  // ElMessage.warning("该功能正在开发中...");
  if (row.recordReportUrl) {
    let url = BaseImageUrl + row.recordReportUrl;
    window.open(url);
  }
};
</script>
<style scoped lang="scss">
:deep(.main_modal) {
  background-color: #fff;
  padding: 10px 15px;
}
.header_modal {
  display: flex;
  align-items: center;
  .header_modal_item {
    display: flex;
    margin-right: 10px;
    min-width: 200px;
  }
}

.pagination_block {
  padding: 10px;
  justify-items: flex-end;
}
.operate_block {
  div {
    padding-right: 8px;
  }
}
</style>
